<template>
  <div class="common-search">
    <div class="search-flex">
      <van-search
        class="search-ipt"
        autocomplete="off"
        v-model="searchKeyword"
        clearable
        @focus="isSuggestVisible = true"
        @update:model-value="onSearchValChange"
        @search="onSearchFn"
        :show-action="false"
        :placeholder="placeholder"
      />
      <van-button
        class="search-btn"
        @click.stop="onSearchFn"
        type="primary"
        size="small"
      >查询
      </van-button
      >
    </div>
    <van-list
      class="suggest-box hx-scroll"
      v-if="suggestList.length"
      v-show="isSuggestVisible"
      :finished="finished"
      :offset="100"
      v-model:loading="loading"
      finished-text="没有更多了"
      @load="onLoadMore"
    >
      <div
        class="suggest-item"
        v-for="item in suggestList"
        :key="item.id"
        @click="onSelectItem(item)"
      >
        <van-icon name="search"/>
        <span class="suggest-content" v-html="item.label"></span>
      </div>
    </van-list>
  </div>
</template>
<script setup>
import {ref, watch, getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance();
const emit = defineEmits([
  "onSearchFn",
  "onSelectItem",
  "onSearchValChange",
  "onLoadMore",
]);
const isSuggestVisible = ref(false);
const searchKeyword = defineModel("search-keyword");
const loading = defineModel("loading", {default: false});
const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入",
  },
  finished: {
    type: Boolean,
    default: false,
  },
  suggestList: {
    type: Array,
    default: [],
  },
});
watch(
  () => props.suggestList,
  (newVal, olaVal) => {
    if (newVal.length) {
      isSuggestVisible.value = true;
    } else {
      isSuggestVisible.value = false;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
//输入框输入值改变
const onSearchValChange = proxy.$utils.debounce((val) => {
  emit("onSearchValChange", val);
}, 500);

//点击查询
function onSearchFn() {
  isSuggestVisible.value = false;
  emit("onSearchFn", searchKeyword.value);
}

function onSelectItem(item) {
  isSuggestVisible.value = false;
  emit("onSelectItem", item);
}

function onLoadMore() {
  emit("onLoadMore");
}
</script>
<style lang="scss" scoped>
.common-search {
  position: relative;

  .search-flex {
    display: flex;
    align-items: center;

    .search-ipt {
      padding: 0px !important;
      flex: 1;
      width: 1px;
    }

    .search-btn {
      margin-left: 10px;
    }
  }

  .suggest-box {
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(100% - 1px);
    overflow: auto;
    background-color: #fff;
    border-radius: 10px;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    min-height: 120px;

    .suggest-item {
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 12px;
      line-height: 16px;
      padding: 10px 4px;
      border-bottom: 1px solid rgba(119, 126, 140, 10%);

      .suggest-content {
        flex: 1;
        width: 1px;
        margin-left: 4px;
        cursor: pointer;
      }
    }
  }
}
</style>
